<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .pagination {
        width: 100%;
        display: flex;
        flex-direction: row;
        list-style: none;
    }

    .page-item {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #d9d9d9;
        color: #000;
        margin-right: 5px;
        transition: background .3s cubic-bezier(0.075, 0.82, 0.165, 1);
        border-radius: 3px;
        cursor: pointer;
        user-select: none;
    }

    .page-item:hover {
        background: #0084ff;
        color: #fff;
        border: 1px solid #fff;
    }

    .page-item.active {
        background: #0084ff;
        box-shadow: none;
        color: #fff;
        border: 1px solid #fff;
    }

    button {
        transition: all 1s;
    }
</style>

<body>

    <div id="root">
        <div class="哈哈哈哈>
            <div class="qq">
            <p>1233</p>
        </div>
    </div>

    <script type="module" src="../src/main.js"></script>
    <script type="module">
        let template = `

<button class="chatBtn mdui-btn mdui-btn-icon mdui-text-color-theme-icon mdui-ripple">
<i class="mdui-icon material-icons">{{props.icon}}</i>
</button>

`
        let pp = Sact.component({
            template,
            props: {
                icon: "tag_faces"
            },
            shouldUpdate() {
                console.log(123)
                return false;
            }
        })
        window.root = new Sact({
            ele: "#root",
            data: {
                qq: false,
                text: "haha",
                total: 100,
                stovj: {
                    color: "red",
                },
                red: {
                    fontSize: "44px",
                }
            },
            method: {
                pp() {
                    this.data.total = parseInt(Math.random() * 100);
                    console.log(this.data.total);
                }
            },
            component: {
                pp,
            }
        })
    </script>
</body>

</html>